<template>
  <div class="esign">
    <div class="esign-box">
      <div style="display: flex;justify-content: flex-end;">
        <a @click="undo">撤销</a>
        <a @click="handleReset" style="margin-left: 15px;">清除全部</a>
      </div>
      <!-- <vue-esign class="sign1" ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"
        :lineColor="lineColor" :bgColor.sync="bgColor" /> -->
      <VueSignaturePad ref="signaturePad" v-model="signMsg"></VueSignaturePad>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {
    ACCESS_TOKEN
  } from "@/store/mutation-types"
  import {
    getFileAccessHttpUrl
  } from '@/api/manage';
  import {
    uploadAction
  } from '@/api/manage'
  export default {
    data() {
      return {
        lineWidth: 6,
        lineColor: "#000000",
        bgColor: "",
        isCrop: false,
        borders: "1px solid red",
        signMsg: ''
      };
    },
    computed: {

    },
    methods: {
      undo() {
        console.log(this.signMsg)
        this.$refs.signaturePad.undoSignature();

      },
      save() {
        const {
          isEmpty,
          data
        } = this.$refs.signaturePad.saveSignature();
        return new Promise((reslove, reject) => {
          if(isEmpty) {
            reject()
          } else {
            let formData = new FormData()
            const file = this.convertBase64UrlToBlob(data)
            formData.append('file', file, `sign_.png`);
            const url = "/sys/common/upload"
            uploadAction(url, formData).then((res) => {
              if (res.success) {
                reslove(res.message)
                
              }
            })
          }
        })
        console.log(isEmpty)
        console.log(data)
      },
      /**
       * 将以base64的图片url数据转换为Blob
       * @param urlData 用url方式表示的base64图片数据
       */
      convertBase64UrlToBlob(urlData) {
        var arr = urlData.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
          type: mime
        });
      },
      handleReset() {
        this.$refs.signaturePad.clearSignature();
      },
    },

  }
</script>

<style scoped>
  .esign {
    max-width: 1000px;
    margin: auto;
    padding: 10px;
    border: 1px solid rebeccapurple;
  }

  .esigh-btns button {
    color: #fff;
    height: 40px;
    width: 100px;
    font-size: 16px;
    margin-right: 10px;
    outline: none;
    border-radius: 4px;
    background: #f60;
    border: 1px solid transparent;
  }

  .esigh-btns button:active {
    color: #fff;
    box-shadow: 0px 0px 50px orangered inset;
  }

  .esigh-result {
    margin-top: 10px;
  }

  .esigh-result img {
    display: block;
    /* max-width: 100%; */
    /* height: auto; */
    max-width: 50%;
    height: 50%;
    margin: auto;
    left: 50%;
    transform: rotateX(50%);
    border: 1px solid #ececee;
  }

  .esignature {
    margin: 10px 0;
    border: 2px solid #ccc;
  }
</style>
